<!--
 * @Descripttion: 
 * @version: 
 * @@Company: DCIT-SH
 * @Author: 王富银
 * @Date: 2024-08-12 22:49:18
 * @LastEditors: Sunny Chen
 * @LastEditTime: 2024-08-20 20:02:25
-->

<template>
  <div class="panel" ref="panel">
    <!-- <h2>
      {{ title }}
    </h2> -->
    <div class="chart"></div>
    <div class="panel-footer">
      <component :is="currentComponent"></component>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  top: {
    type: Number,
    default: 0,
    required: true,
  },
  leftOrRight: {
    type: String,
    // default:"left",
    required: true,
  },
  currentComponent: {
    type: Object,
    required: true,
  },
});
import { onMounted, ref } from "vue";
const panel = ref(null);
onMounted(() => {
  panel.value.style.top = props.top + "px";
  if (props.leftOrRight == "left") {
    panel.value.style.left = "20px";
  } else {
    panel.value.style.right = "20px";
  }
});
</script>
<style scoped>
.panel {
  position: absolute;
  height: 220px;
  width: 400px;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: rgba(255, 255, 255, 0.04) url('/src/assets/ui/line\(1\).png');
  margin-bottom: 10px;
}
.panel::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
}
.panel::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
}
.panel .panel-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.panel .panel-footer::before {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
}
.panel .panel-footer::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
}
.panel h2 {
  height: 20px;
  line-height:20px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-weight: 400;
}
.panel .chart {
  height: 220px;
  padding: 2px;
  /* margin-top: 5px; */
}
</style>
